<template>
    <div class="flex center">

        <!-- 组件 -->
        <test-cmp
            v-model:text="text"
            v-model:formatText="numberText"
            unit="个"
            :option="{ size: 'big' }"
            :testList="[{ name: 'A' },{ name: 'B' },{ name: 'C' }]"
            @formatText="onFormatText"
        >
            <!-- <template #default="{ data, unit }">
                <p class="def-view">{{ `${data} ${unit}` }}</p>
            </template> -->
    
            <!-- slot="header" slot-scope="{ data }" -->
            <template #header="{ data }">
                <p>{{ `我是标题 (${data})` }}</p>
            </template>

            <template #footer>
                <p>我是尾巴</p>
            </template>

        </test-cmp>

        <!-- 父类视图及操作 -->
        <div class="flex">
            <p class="bv-hint">{{ `父类数据: text = ${text} / numberText = ${numberText}` }}</p>
        </div>
    </div>
</template>
<script setup>

    // vue模块
    import { ref, reactive, onMounted } from "vue";

    // 组件模块
    import TestCmp from '../../components/TestCmp';

    // 工具模块
    // import xx from 'xx';

    const text = ref(0);
    const numberText = ref('');

    const form = reactive({
        text: 0,
        numberText: '',
    });

    onMounted(() => {
        text.value = 2;
    })

    const onFormatText = (val) => {
        console.log('onFormatText = ', val);
    }

</script>
<style scoped>
    .bv-hint {
        font-size: 16px;
        color: #333333;
        font-weight: bold;
    }
    .def-view {
        width: 130px;
        font-size: 22px;
        color: #409EFF;
        font-weight: bold;
    }
</style>